<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link>
      |
      <router-link to="/demo">demo</router-link>
      |
      <router-link to="/about">About</router-link>
      |
      <router-link to="/param/5">param/id/5</router-link>
      |
      <router-link to="/param?id=5">param?id=5</router-link>
      |
      <router-link to="/task">task</router-link>
      |
      <router-link to="/task/list">task/list</router-link>
      |
      <router-link to="/task/log">task/log</router-link>
      <br>
      <button v-on:click="goParam1(1)">param/id/1</button>
      <br>
      <button v-on:click="goParam2(2)">param?id=2</button>
      <br>
      <button v-on:click="getList()">ajax获取数据</button>
      <router-link :to="{path: '/param', query: {id: '1'}}">param?id=1</router-link>
      |
      <router-link :to="{name: 'Param', params: {id: '2'}}">param/id/2</router-link>

    </div>
    <router-view name="start"/>
    <router-view/>
    <router-view name="end"/>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  methods: {
    goParam1(id) {
      this.$router.push('/param/' + id)
    },
    goParam2(id) {
      this.$router.push('/param?id=' + id)
    },
    getList(){
      axios.get('https://cdn.liyanhui.com/data.json').then(res=>{
        console.log(res)
      })
    }
  }
}

</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>
